<template>
  <div class="video-box">
    <video class="video-player" :id="vid" v-bind="$attrs"></video>
  </div>
</template>

<script>
export default {
  name: 'WqVideo',
  props: {
    vid: {
      type: String,
      required: true
    },
    url: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      flvPlayer: null,
      videoDom: null
    }
  },
  mounted() {
    this.videoDom = document.getElementById(this.vid)
    this.getPlay()
  },
  methods: {
    getPlay() {
      console.log('video详细', this.videoDom, this.url)

      if (flvjs.isSupported()) {
        this.flvPlayer = flvjs.createPlayer({
          type: 'flv',
          url: this.url
        })
        this.flvPlayer.attachMediaElement(this.videoDom)
      }
      this.flvPlayer.load()
      this.flvPlayer.play()
    }
  },
  beforeDestroy() {
    // 销毁实例
    this.flvPlayer.unload()
    this.flvPlayer.detachMediaElement()
    this.flvPlayer.destroy()
  }
}
</script>

<style lang="less" scoped>
  .video-box {
    width: 600px;
    border: solid 1px #fff;

    .video-player {
      width: 100%;
      height: 100%;
    }
  }
</style>